<!DOCTYPE html>
<html>

<head>
	<!-- 页面meta -->
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>传智健康</title>
	<meta name="description" content="传智健康">
	<meta name="keywords" content="传智健康">
	<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
	<!-- 引入样式 -->
	<link rel="stylesheet" href="../plugins/elementui/index.css">
	<link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="../css/style.css">
	<!-- 引入组件库 -->
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script src="../js/vue.js"></script>
	<script src="../plugins/elementui/index.js"></script>
	<script src="../js/axios-0.18.0.js"></script>
	<style>
		.datatable {
			position: relative;
			box-sizing: border-box;
			-webkit-box-flex: 1;
			width: 100%;
			max-width: 100%;
			font-size: 14px;
			color: rgb(96, 98, 102);
			overflow: hidden;
			flex: 1 1 0%;
		}
		
		.datatable td,
		.datatable th {
			padding: 12px 0;
			min-width: 0;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			text-overflow: ellipsis;
			vertical-align: middle;
			position: relative;
			text-align: left;
		}
	</style>
</head>

<body class="hold-transition">
<div id="app">
	<div class="content-header">
		<h1>角色及权限管理<small>权限管理</small></h1>
		<el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>角色及权限管理</el-breadcrumb-item>
			<el-breadcrumb-item>权限管理</el-breadcrumb-item>
		</el-breadcrumb>
	</div>
	<div class="app-container">
		<div class="box">
			<div class="filter-container">
				<el-input placeholder="权限名/权限关键字" v-model="condition" style="width: 200px;" class="filter-item"
				          @keyup.enter.native="handleFilter"></el-input>
				<el-button @click="_findPage()" class="dalfBut">查询</el-button>
				<el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>
			</div>
			<el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
				<el-table-column prop="id" align="center" label="ID"></el-table-column>
				<el-table-column prop="name" label="权限名称" align="center"></el-table-column>
				<el-table-column prop="keyword" label="权限关键字" align="center"></el-table-column>
				<el-table-column prop="description" label="描述" align="center"></el-table-column>
				<el-table-column label="操作" align="center">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
						<el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination-container">
				<el-pagination class="pagiantion" @current-change="handleCurrentChange" :current-page="pagination.currentPage"
				               :page-size="pagination.pageSize" layout="total, prev, pager, next, jumper" :total="pagination.total">
				</el-pagination>
			</div>
			<!-- 新增标签弹层 -->
			<div class="add-form">
				<el-dialog title="新增权限" :visible.sync="dialogFormVisible">
					<template>
						<el-tabs v-model="activeName" type="card">
							<el-tab-pane label="基本信息" name="first">
								<el-form label-position="right" label-width="100px">
									<el-row>
										<el-col :span="12">
											<el-form-item label="权限名称">
												<el-input v-model="formData.name" />
											</el-form-item>
										</el-col>
										<el-col :span="12">
											<el-form-item label="权限关键字">
												<el-input v-model="formData.keyword" />
											</el-form-item>
										</el-col>
									</el-row>
									<el-row>
										<el-col :span="24">
											<el-form-item label="权限描述">
												<el-input v-model="formData.description" type="textarea"></el-input>
											</el-form-item>
										</el-col>
									</el-row>
								</el-form>
							</el-tab-pane>
						</el-tabs>
					</template>
					<div slot="footer" class="dialog-footer">
						<el-button @click="dialogFormVisible = false">取消</el-button>
						<el-button type="primary" @click="handleAdd()">确定</el-button>
					</div>
				</el-dialog>
			</div>
			
			<!-- 编辑标签弹层 -->
			<div class="add-form">
				<el-dialog title="编辑检查组" :visible.sync="dialogFormVisible4Edit">
					<template>
						<el-tabs v-model="activeName" type="card">
						<el-tab-pane label="基本信息" name="first">
							<el-form label-position="right" label-width="100px">
								<el-row>
									<el-col :span="12">
										<el-form-item label="权限名称">
											<el-input v-model="formData.name" />
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="权限关键字">
											<el-input v-model="formData.keyword" />
										</el-form-item>
									</el-col>
								</el-row>
								<el-row>
									<el-col :span="24">
										<el-form-item label="权限描述">
											<el-input v-model="formData.description" type="textarea"></el-input>
										</el-form-item>
									</el-col>
								</el-row>
							</el-form>
						</el-tab-pane>
					</el-tabs>
					</template>
					<div slot="footer" class="dialog-footer">
						<el-button @click="dialogFormVisible4Edit = false">取消</el-button>
						<el-button type="primary" @click="handleEdit()">确定</el-button>
					</div>
				</el-dialog>
			</div>
		</div>
	</div>
</div>
</body>

<script>
	var vue = new Vue({
		el: '#app',
		data: {
			activeName: 'first', //添加/编辑窗口Tab标签名称
			pagination: { //分页相关属性
				currentPage: 1,
				pageSize: 10,
				total: 100,
				queryString: "",
			},
			condition:"",
			dataList: [], //列表数据
			formData: {}, //表单数据
			tableData: [], //新增和编辑表单中对应的检查项列表数据
			dialogFormVisible: false, //控制添加窗口显示/隐藏
			dialogFormVisible4Edit: false, //控制编辑窗口显示/隐藏
			backendUrl: "http://localhost:82"
		},
		created() {
			this.findPage();
		},
		methods: {
			//修改
			/**
			 * 步骤：
			 *  1. 发送ajax请求，数据：检查组基本信息， 选中的检查项id
			 *  2. 关闭弹框
			 *  3. 重新查询
			 *  4. 消息提示
			 */
			handleEdit() {
				//1. 发送ajax请求，数据：检查组基本信息， 选中的检查项id
				axios.post(this.backendUrl + "/permission/edit.do", this.formData).then((res) => {
					//2. 关闭弹框
					this.dialogFormVisible4Edit = false;
					//3. 重新查询
					this.findPage();
					//4. 消息提示
					this.$message({
						message: res.data.message,
						type: res.data.flag ? "success" : "error"
					});
				}).
				catch((err) => {
					console.log(err);
				});
			},
			//添加
			/**
			 * 步骤：
			 *      1. 发送ajax请求，提交 检查组的基本信息， 选中的检出项的id
			 *      2. 请求完成后
			 *          2.1 消息提示
			 *          2.2 关闭弹窗
			 *          2.3 重新查询
			 *
			 */
			handleAdd() {
				axios.post(this.backendUrl + "/permission/add.do", this.formData ).then((res)=>{
				    // 2.1 消息提示
				    this.$message({
				        message: res.data.message,
				        type: res.data.flag ? "success": "error"
				    });
				    // 2.2 关闭弹创建
				    this.dialogFormVisible = false;
				    // 2.3 重新查询
				    this.findPage();
				}).catch((err)=>{
				    console.log(err);
				});
			},
			_findPage() {
				this.pagination.currentPage = 1;
				this.pagination.queryString = this.condition;
				this.findPage();
			},

			//分页查询
			findPage() {
				//1.封装参数
				var param = {
					currentPage: this.pagination.currentPage,
					pageSize: this.pagination.pageSize,
					queryString: this.pagination.queryString
				};
				//2. 发送请求
				axios.post(this.backendUrl + "/permission/findPage.do", param).then((res) => {
					this.dataList = res.data.rows;
					this.pagination.total = res.data.total;
				}).catch((err) => {
					console.log(err);
				});
			},
			// 重置
			/**
			 * 1. 重置基本信息
			 * 2. 设置默认的标签页
			 * 3. 清除选中检查项
			 *
			 */
			resetForm() {
				this.formData = {};
				this.activeName = "first";
			},
			//新增 数据回显的方法
			/**
			 * 1. 弹出窗口
			 * 2. 重置表单
			 */
			handleCreate() {
				//1. 弹出窗口
				this.dialogFormVisible = true;
				//2. 重置表单
				this.resetForm();
			},
			//编辑检查组数据回显
			/**
			 * 1. 获取id
			 * 2. 弹出编辑窗口
			 * 3. 重置
			 * 4. 发送ajax请求
			 *          查询该检查组的基本信息， 查询所有的检查项信息， 查询检查组对应的检查项的id
			 * @param row  表格的行数据，包含 检查组id
			 */
			handleUpdate(row) {
				//1.获取id
				var id = row.id;
				//2弹出编辑窗口
				this.dialogFormVisible4Edit = true;
				//3.重置
				this.resetForm();
				//4. 发送ajax请求
				//查询该权限的基本信息
				axios.get(this.backendUrl + "/permission/findById.do?id=" + id).then((res) => {
					this.formData = res.data.data;
				}).catch((err) => {
					console.log(err);
				});
			},
			//切换页码
			handleCurrentChange(currentPage) {
				this.pagination.currentPage = currentPage;
				this.findPage();
			},
			// 删除
			handleDelete(row) {
				//获取id
				var id = row.id;
				this.$confirm('确定删除该权限吗?', '提示', {
					confirmButtonText: '删除',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					//3. 点击确定，发送ajax请求，根据id删除
					axios.get(this.backendUrl + "/permission/delete.do?id=" + id).then((res) => {
						//重新查询
						this.findPage();
						//消息提示
						this.$message({
							message: res.data.message,
							type: res.data.flag?"success":"error"
						});
					}).catch((err) => {
						console.log(err);
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			}
		}
	})
</script>

</html>